<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <head-top :title="'订单详情'"></head-top>
      <div class="order-product">
      <div class="sale-personal-content">
        <span class="paragraph-p2-heavy div-align-justify-center">{{ startDate + '-' + endDate }}</span>
        <span v-if="$route.query.active == 'true'" class="sale-personal-content-ing div-align-justify-center paragraph-p3-heavy color-red">· 进行中</span>
      </div>
      <div class="order-product-item" v-for="(item, i) of itemList" :key="'orderProductItem' + i">
        <div class="order-product-item-left">
          <div class="order-product-item-left-left paragraph-p2-heavy">{{ item.updated_at }}</div>
          <div class="order-product-item-left-right">
            <span class="paragraph-p3-light color-grey">提成</span>
            <span class="subheading-heavy padding-left-4">{{ '$' + item.commission }}</span>
          </div>
        </div>
        <div class="order-product-item-small paragraph-p3-light color-grey">{{ '订单号：' + item.order_id }}</div>
        <div class="order-product-item-info">
          <div class="order-product-item-info-img">
            <img class="img-64" :src="item.product_image_list ? item.product_image_list[0] : ''" alt=""/>
          </div>
          <div class="order-product-item-info-content">
            <div class="order-product-item-info-content-desc paragraph-p2-light color-grey text-desc">
              {{ item.product_description }}
            </div>
            <div class="order-product-item-info-row">
              <div class="order-product-item-info-row-left paragraph-p3-light color-grey">{{ '货号：' + item.product_code }}</div>
              <div class="order-product-item-info-row-right paragraph-p3-light">{{ '零售价$' + item.product_retail_price }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </v-touch>
  </div>
</template>

<script>
import HeadTop from '@/components/HeadTop'
import { viewOrderDetailsReport } from '@/request/api'
import {Toast} from 'vant';
export default {
  components: {
    HeadTop,
  },
  name: "ReportViewOrder",
  data() {
    return {
      tab: this.GLOBAL.listItemType.report.performance.month,
      reportPerformance: this.GLOBAL.listItemType.report.performance,
      performanceListType: this.GLOBAL.listType.performance,
      startDate: this.$route.query.startDate,
      endDate: this.$route.query.endDate,
      itemList:[],
    };
  },
  mounted() {
    this.viewOrderDetailsReport()
  },
  methods: {
    viewOrderDetailsReport() {
      viewOrderDetailsReport({
        pathParam: this.$route.query.userId,
        date_from: this.startDate,
        date_to: this.endDate
      }).then(res => {
        const { State, Data, Msg } = res
        if (State) {
          this.itemList = Data
        } else { Toast(Msg) }
      })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.order-product {
  background: #F5F5F5;
  height: 100vh;
}
.sale-personal-content {
  height: 54px;
  color: #424242;
  display: flex;
  flex-direction: row;
  margin-left: 16px;
}
.order-product-item {
  padding: 16px;
  height: 158px;
  background: #FFFFFF;
}
.order-product-item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.order-product-item-left-left {
  width: 60%;
}
.order-product-item-left-right {
  width: 30%;
}
.order-product-item-small {
  margin-top: 4px;
}
.order-product-item-info {
  margin-top: 16px;
  height: 66px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.order-product-item-info-img {
  width: 64px;
}
.order-product-item-info-content {
  width: 271px;
  margin-left: 8px;
}
.order-product-item-info-content-desc {}
.order-product-item-info-row {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.order-product-item-info-row-left {
  width: 60%;
}
.order-product-item-info-row-right {
  width: 40%;
  text-align: right;
}
</style>
<style>
</style>